<template>
  <div ref="charts" class="charts" />
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'

export default {
  name: 'SalesChart',
  mixins: [resize],
  mounted() {
    const myEcharts = echarts.init(this.$refs.charts)
    myEcharts.setOption({
      grid: {
        left: 0,
        right: 0,
        bottom: 0,
        containLabel: true
      },
      title: {
        text: '销售量趋势'
      },
      xAxis: {
        data: [
          '一月',
          '二月',
          '三月',
          '四月',
          '五月',
          '六月',
          '七月',
          '八月',
          '九月',
          '十月',
          '十一月',
          '十二月'
        ]
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          // 设置鼠标移动上去显示透明效果
          lineStyle: {
            width: 50,
            color: 'rgba(0, 0, 0, .1)'
          }
        }
      },
      yAxis: {},
      series: {
        name: '销售量',
        type: 'bar',
        data: [44, 126, 95, 88, 133, 99, 33, 113, 63, 98, 77, 123],
        barWidth: 30
      }
    })
    this.myEcharts = myEcharts
  }
}
</script>

<style lang="scss" scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>
